<template>
  <div id="index">
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh1">
      <div class="mui-scroll">
        <div style="border:1px solid #fff;">
           <Carousel height="auto"   arrow="never" :autoplay-speed="speed" autoplay  dots="none"   loop>
            <CarouselItem   v-for="(item,index) in carousel"  :key="item.id">
             <img class="banner" style="width: 100%;height:150px;" src="https://wx4.sinaimg.cn/mw1024/005zpxwhly1fyy0vzi6w5j309q04edfz.jpg" alt="图片baner">
             </CarouselItem> 
          </Carousel>
        </div>
       
        <!-- 优惠券 -->
        <div class="discountCard">
          <img :src="discountCard" alt="">
        </div>
          <div class="content1">
            <!--   <div class="content1-tab">
            <div class="content1-tab-item" @tap="tab('all')">
              <div :class="{'active-text': tabIndex == 'all'}">全部</div>
              <div :class="{'active': tabIndex == 'all'}"></div>
            </div>
            <div class="content1-tab-item" v-for="(item, index) in typeList" v-show="index < 3" @tap="tab(item.CommodityClassifyID)">
              <div :class="{'active-text': tabIndex == item.CommodityClassifyID}">{{item.classifyName}}</div>
              <div :class="{'active': tabIndex == item.CommodityClassifyID}"></div>
            </div>
            <div class="content1-tab-item" @tap="typeMore = true">
              ...
            </div>
          </div> -->
            <!--        <div class="commodity-tab">
            <div class="commodity-tab-item" v-for="(item, index) in index" @tap="index == 0? navClick(index) : tabItem(index)">
              <div :class="{'commodity-tab-item-name': true, 'active':index==tabId}" :data-id="index">
                <span>{{item}}</span>
                <span v-if="index == 0">
									<img v-if="!tabId == 1" :class="{'up': dialog == true}" src="../../static/img/icon/find_icon/xia.png"/>
									<img v-else src="../../static/img/icon/find_icon/xia_1.png"/>
						</span>
              </div>
            </div>
          </div> -->
            <div class="commodity-content">
              <div class="commodity-content-list" v-for="(item,index) in data" :key="index">
         <!--     -->
                  <div class="commodity-content-list-left"  @tap="go('commodityDetail',item.CommodityID)">
                    <img :src="item.pic"/>
				    			</div>
                  <div class="commodity-content-list-right">
                    <div class="commodity-content-list-title"  @tap="go('commodityDetail',item.CommodityID)">
                      {{item.name}}
                    </div>
                    <div class="commodity-content-list-mid"  @tap="go('commodityDetail',item.CommodityID)">
                      {{item.desc}}
                    </div>
                    <div class="commodity-content-list-bottom" >
                      <div class="commodity-content-list-money">
                        ￥{{item.price}}
                        <!-- <span>￥{{item.discountPrice}}</span> -->
                      </div>
                      <!-- <div class="commodity-content-list-bottom-right">
                      已售{{item.salesVolume == null ? 0 : item.sale}}
                    </div> -->
                      <div class="commodity-content-list-bottom-right">
             
                        <div class="btn btn-buy" @tap='addShopping(item.CommodityID)'>加入购物车</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="dialog" v-if="dialog">
                <div class="item" v-for="(item, index) in screenList" @tap="dialogClick(index)">
                  <div>{{item}}</div>
                  <div v-if="index == dialogIndex"><img src="../../static/img/icon/find_icon/gou.png"/></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <coupon-mask :dialog="show" @hide="hide"></coupon-mask>
          <more-type :dialog="typeMore" :list="typeList" @hide="hide" @success="success"></more-type>
        </div>
</template>
<script>
import couponMask from '../base/couponMask'
import { getData } from '../service/getData'
import moreType from '../base/drag-right'
import Vue from "vue"
import { Carousel,CarouselItem, Button } from "iview"
export default {
  components: {
    couponMask,
    moreType,
    Carousel, 
    CarouselItem,
    Button
  },
  data() {
    return {
      show: false,
      firstImg: '',
      lastImg: '',
      speed:3000,
     
      discountCard: 'https://wx4.sinaimg.cn/mw1024/005zpxwhly1fyy2ymbehdj30e002zq32.jpg',
      typeList: [],
      data: [],
      tabIndex: 'all',
      type: {},
      type1: {},
      type2: {},
      typeMore: false,
      index: ['综合', '销量', '最新上架'],
      tabId: 0,
      dialog: false,
      screenList: ['综合', '价格升序', '价格降序'],
      dialogIndex: 0,
      list: [],
      page: 1,
      lastPage: 1,
      carousel: [
      { id: 1, src: 'https://wx4.sinaimg.cn/mw690/005zpxwhly1fyy0vzi6w5j309q04edfz.jpg' },
      { id: 2, src: 'https://wx4.sinaimg.cn/mw690/005zpxwhly1fyy0vzi6w5j309q04edfz.jpg' }, 
      { id: 3, src: 'https://wx4.sinaimg.cn/mw690/005zpxwhly1fyy0vzi6w5j309q04edfz.jpg' }],
    }
  },
  methods: {
  	
    hide() {
      this.show = false
      this.typeMore = false
    },
    init() {
     //默认加载
      let that = this;
     // this.$store.state.isLoading = true
      getData('/commodityclassify/getClassifyByInfoApi').then(d => {
        this.typeList = d.classifyList
      })

      getData('/mallhomepagesort/getAllHomePageApi').then(d => {
       let klist = d.pageSortList
        for (let i in klist) {
          klist[i].pic = "https://wx4.sinaimg.cn/mw1024/005zpxwhly1fyy0vzi6w5j309q04edfz.jpg";
        }
        this.list = klist;
      })

      getData('/commodity/getCommodityListByInfoApi', {
        pn: 1
      }).then(d => {

        this.$store.state.isLoading = false
        //  this.data = d.pageInfo.list
        let goodlist = d.pageInfo.list;
        for (let i in goodlist) {
          goodlist[i].pic = 'https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg';
          goodlist[i].name = goodlist[i].classifyName;
          goodlist[i].desc = goodlist[i].commodityContent;
          goodlist[i].price =  goodlist[i].discountPrice;
          goodlist[i].saleNum = goodlist[i].salesVolume;
        }

        this.data = goodlist;
        //this.lastPage = d.pageInfo.lastPage
      }).catch(err => {
        this.$store.state.isLoading = false
        console.log(err)
      })
      this.pulldownRefresh();
    },
    dialogClick(index) { //综合
      this.dialogIndex = index
      this.dialog = false
      if (index == 0) {
        if (typeof this.tabIndex == 'number') {
          getData('/commodity/getCommodityListByInfoApi', {
            pn: 1,
            parentClassify: this.tabIndex,
            orderByType: 1
          }).then(d => {
            this.data = d.pageInfo.list
          })
        } else {
          getData('/commodity/getCommodityListByInfoApi', {
            pn: 1,
            orderByType: 1
          }).then(d => {
            this.data = d.pageInfo.list
          })
        }
      } else {
        if (typeof this.tabIndex == 'number') {
          getData('/commodity/getCommodityListByInfoApi', {
            pn: 1,
            parentClassify: this.tabIndex,
            sortType: index == 1 ? 2 : 1
          }).then(d => {
            this.data = d.pageInfo.list
          })
        } else {
          getData('/commodity/getCommodityListByInfoApi', {
            pn: 1,
            sortType: index == 1 ? 2 : 1
          }).then(d => {
            this.data = d.pageInfo.list
          })
        }
      }
    },
    success(id) { //类型选择
      this.tabIndex = id
      getData('/commodity/getCommodityListByInfoApi', {
        pn: 1,
        parentClassify: id,
        orderByType: this.tabId + 1
      }).then(d => {
        this.data = d.pageInfo.list
      })
    },
    navClick(index) { //综合功能
      this.dialog = !this.dialog
      this.tabId = index
    },
    tabItem(index) { //销量
      this.tabId = index
      this.dialog = false
      if (index == 0) {
        if (this.dialogIndex == 0) {
          getData('/commodity/getCommodityListByInfoApi', {
            pn: 1,
            parentClassify: this.tabIndex == 'all' ? 1 : this.tabIndex + 1,
            orderByType: 1
          }).then(d => {
            this.data = d.pageInfo.list
          })
        } else {
          getData('/commodity/getCommodityListByInfoApi', {
            pn: 1,
            parentClassify: this.tabIndex == 'all' ? 1 : this.tabIndex + 1,
            sortType: this.dialogIndex == 1 ? 2 : 1
          }).then(d => {
            this.data = d.pageInfo.list
          })
        }
      } else {
        getData('/commodity/getCommodityListByInfoApi', {
          pn: 1,
          parentClassify: this.tabIndex == 'all' ? 1 : this.tabIndex + 1,
          orderByType: index + 1
        }).then(d => {
          this.data = d.pageInfo.list
        })
      }
    },
    tab(str) { //tab栏
      this.dialog = false
      if (typeof str == 'number') {
        this.tabIndex = str
        getData('/commodity/getCommodityListByInfoApi', {
          pn: 1,
          parentClassify: str,
          orderByType: this.tabId + 1
        }).then(d => {
          this.data = d.pageInfo.list
        })
      } else if (str == 'all') {
        this.tabIndex = str
        getData('/commodity/getCommodityListByInfoApi', {
          pn: 1
        }).then(d => {
          this.data = d.pageInfo.list
        })
      } else {
        this.typeMore = true
      }
    },
    NoPuple(){

    },
     addShopping(id) { //加入购物车
      let that=this;
      getData('/shoppingtrolley/addCommodityOnShoppingApi', {
         userId: sessionStorage.userId,
         commodityId:id,
         attributeId:'1',
         sortId:'1',
         buyCount:1
      }).then(d => {
        that.$Message.info(d.msg)
        if (d.code = 1) {
          
        } else {
          alert(d.msg)
        }
      })
    },
     
    go(str, id) { //跳转保存下标
      sessionStorage.index = 2
      this.route(str, id)
    },
    pullupRefresh: function() { //上拉加载
      if (this.lastPage != this.page) {
        getData('/commodity/getCommodityListByInfoApi', {
          pn: this.page++
        }).then(d => {
          mui('#pullrefresh1').pullRefresh().endPullupToRefresh();
          this.data = this.data.concat(d.pageInfo.list)
        })
      } else {
        mui('#pullrefresh1').pullRefresh().endPullupToRefresh(true);
      }
    },
    pulldownRefresh() { //下拉刷新
      let that = this;
      getData('/commodity/getCommodityListByInfoApi', {
        pn: 1
      }).then(d => {
        mui('#pullrefresh1').pullRefresh().endPulldownToRefresh();
        this.$store.state.isLoading = false
      //  this.data = d.pageInfo.list
         let goodlist = d.pageInfo.list;
        for (let i in goodlist) {
          goodlist[i].pic = goodlist[i].titleUrl?'https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg':goodlist[i].titleUrl;
           goodlist[i].name = goodlist[i].classifyName;
          goodlist[i].desc = goodlist[i].commodityContent;
          goodlist[i].price = goodlist[i].discountPrice;
          goodlist[i].saleNum = goodlist[i].salesVolume;
        }

        this.data = goodlist;
       // this.lastPage = d.pageInfo.lastPage
      }).catch(err => {
        this.$store.state.isLoading = false
        console.log(err)
      })
    }
  },
  mounted() { //初始化
    this.$nextTick(() => {
      //获得slider插件对象
      //					    mui(".mui-slider").slider();
      var slider = mui(".mui-slider");
      slider.slider({
        interval: 5000
      });
     
      //mui上拉加载
      mui.init({
        pullRefresh: {
          container: '#pullrefresh1',
          up: { //上拉加载
            height: 40,
            auto: false, //可选,默认false.自动上拉加载一次
            contentrefresh: '正在加载...',
            contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: this.pullupRefresh
          },
          down: {
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容                        
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                        
            contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容                        
            auto: false, //可选,默认false.首次加载自动下拉刷新一次                        
            callback: this.pulldownRefresh
          }
        }
      });
    })
    this.init()
  },
  created() {
    //处理mui下拉加载的bug
    for (var i = mui.hooks.inits.length - 1, item; i >= 0; i--) {
      item = mui.hooks.inits[i];
      if (item.name == "pullrefresh") {
        item.repeat = true;
      }
    }
  },
  watch: {
    list(val) {
      if (val.length != 0) {
        this.firstImg = val[0]
        this.lastImg = val[val.length - 1]
      }
    }
  }
}

</script>
<style scoped lang="less">
.ivu-carousel{
  height: 150px;
}
.banner{
  height:150px;
 
  box-sizing: border-box;
  width: 100%;
}
.commodity-content-list-mid{
     overflow: hidden;
     height:42px;
     
     text-overflow: ellipsis;
     white-space: wrap;
}

.ivu-carousel-track{
	height: 100%;
}
.btn-buy {
  background-color: #E60000;
  color: #fff;
  border-radius: 5px;
  padding:3px 10px;
  cursor: pointer;
}

.discountCard img {
  width: 100%;
  border: 1px solid #fff;
  margin-top:1px;
}

.el-carousel img {

  width: 100%;

  height: 200px;
}

#index {
  background: #eee;
}

#pullrefresh1 {
  margin-top: 50px;
}

.content {
  background: #fff;
}

.content-imgs {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 10px;

  .content-imgs-item {
    flex: 1;
    width: 48%;
    height: 50%;
    background: #eee;

    &:nth-child(1) {
      margin-bottom: 2%;
    }

    &:nth-child(2) {
      margin-left: 2%;
      margin-bottom: 2%;
    }

    &:nth-child(4) {
      margin-left: 2%;
    }
  }
}

.content1 {
  /*border-top: 16px solid #fff;*/
  position: relative;

  .content1-title {
    position: absolute;
    top: -1rem;
    padding: 5px 20px;
    background: coral;
    border-radius: 0 99px 99px 0;
    font-size: 14px;
    color: #fff;
  }

  .dialog {
    position: absolute;
    top: 82px;
    width: 100%;
    background: #fff;
    z-index: 2;
    padding: 0 10px;

    .item {
      border-bottom: 1px solid #e5e5e5;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;

      img {
        width: 20px;
        height: 12px;
      }
    }
  }

  .content1-tab {
    display: flex;
    background: #fff;
    overflow-x: scroll;
    /*flex-wrap: wrap;*/
    align-items: center;
    padding: 15px 0;
    margin-bottom: 1px;

    .content1-tab-item {
      align-items: center;
      justify-content: center;
      flex: 1;
      display: flex;
      height: 12px;
      flex-direction: column;
      border-right: 1px solid #7B7B7B;

      &:last-child {
        border: 0;
      }
    }

    .active-text {
      color: #c9eb59;
    }

    .active {
      width: 20%;
      border-bottom: 2px solid #c9eb59;
      color: #c9eb59;
    }
  }

  .commodity-tab {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    font-size: 14px;

    .commodity-tab-item {
      flex: 1;
      padding: 10px 0 0;
      text-align: center;

      .commodity-tab-item-name {
        display: inline-block;
        margin: 0 auto;
        padding: 0 5px 5px;

        img {
          width: 8px;
          height: 8px;
        }

        .up {
          transform: rotate(180deg);
        }
      }
    }

    .active {
      color: #c9eb59;
      font-weight: bold;
      /*border-bottom: 2px solid #c9eb59;*/
    }
  }

  .commodity-content {
    padding-left: 20px;
    background: #fff;

    .commodity-content-list {
      padding: 10px 10px 10px 0;
      display: flex;
      border-bottom: 1px solid #eee;

      .commodity-content-list-left {
        flex: 1;
        min-height: 80px;

        img {
          width: 100%;
          height: 100%;
          background: #eee;
        }
      }

      .commodity-content-list-right {
        flex: 3;
        font-size: 13px;
        margin-left: 10px;
        position: relative;

        .commodity-content-list-title {
          padding-right: 10px;
          display: -webkit-box;
          word-break: break-all;
          text-overflow: ellipsis;
          font-size: 14px;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .commodity-content-list-bottom {
          position: absolute;
          bottom: 2px;
          display: flex;
          width: 100%;
          justify-content: space-between;

          .commodity-content-list-money {
            color: red;
            font-weight: bold;

            span {
              font-weight: initial;
              color: #7b7b7b;
              font-size: 12px;
              text-decoration: line-through;
            }
          }

          .commodity-content-list-bottom-right {
            font-size: 12px;
            color: #7b7b7b;
          }
        }
      }
    }
  }

  .content1-list {
    width: 100%;
    display: flex;

    img {
      width: 100%;
      max-height: 200px;
    }

    img:nth-child(1) {
      flex: 5;
    }

    img:nth-child(2) {
      flex: 1;
    }
  }
}

</style>
